import React, { Component } from 'react';
import shopping from '../css/shopping.module.css'

export default class Shopping extends Component {
    constructor () {
        super();
        this.state = {
            checkedAll: false,
            list: [
                { id: 1, goodsname: "商品一", goodsprice: 100, goodsnum: 10, checked: false },
                { id: 2, goodsname: "商品二", goodsprice: 200, goodsnum: 1, checked: true },
                { id: 3, goodsname: "商品三", goodsprice: 200, goodsnum: 1, checked: false }
            ]
        }
    }
    num(item, num) {
        this.setState({
            list: this.state.list.map(obj => {
                if (item.id === obj.id) {
                    obj.goodsnum = obj.goodsnum + num
                    if (obj.goodsnum < 1) {
                        obj.goodsnum = 1
                    }
                }
                return obj
            })
        })
    }
    changeNum(value, item) {
        if (value < 1 || isNaN(value)) {
            value = 1
        }
        this.setState({
            list: this.state.list.map(obj => {
                if (item.id === obj.id) {
                    return { ...obj, goodsnum: value }
                } else {
                    return obj
                }
            })
        })
    }
    changeChecked(item) {
        this.setState({
            list: this.state.list.map(obj => {
                if (item.id === obj.id) {
                    return { ...obj, checked: !obj.checked }
                } else {
                    return obj
                }
            })
        }, () => {
            if (this.state.list.every(item => item.checked)) {
                this.setState({
                    checkedAll: true
                })
            } else {
                this.setState({
                    checkedAll: false
                })
            }
        })
    }
    changeCheckedAll() {
        this.setState({
            checkedAll: !this.state.checkedAll,
            list: this.state.list.map(obj => {
                return { ...obj, checked: !this.state.checkedAll }
            })
        })
    }
    detele(id) {
        this.setState({
            list: this.state.list.filter(item => item.id !== id)
        })
    }
    render() {
        let price = 0;
        let num = 0;
        let checkedList = this.state.list.filter(item => item.checked);
        if (checkedList.length) {
            price = checkedList.map(item => item.goodsnum * item.goodsprice).reduce((a, b) => a + b);
            num = checkedList.map(item => item.goodsnum).reduce((a, b) => a + b);
        }
        return (
            <div>
                <table className={shopping.table} cellPadding='0' cellSpacing='0' border='1px solid #000'>
                    <thead>
                        <tr>
                            <th>
                                <p style={{ display: 'inline-block' }}>是否选中</p>
                                <input type="checkbox" checked={this.state.list.every(item => item.checked)} onChange={() => this.changeCheckedAll()} />
                            </th>
                            <th>商品序列</th>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>总价</th>
                            <th>商品数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.list.map(item =>
                            <tr key={item.id} style={{ backgroundColor: 'skyblue' }}>
                                <td><input type="checkbox" checked={item.checked} onChange={() => this.changeChecked(item)} /></td>
                                <td>{item.id}</td>
                                <td>{item.goodsname}</td>
                                <td>￥{item.goodsprice}</td>
                                <td>￥{item.goodsprice * item.goodsnum}</td>
                                <td>
                                    <button onClick={() => { this.num(item, -1) }} style={{ width: '20px' }}>-</button>
                                    <input value={item.goodsnum} onChange={(e) => { this.changeNum(e.target.value, item) }} style={{ width: '50px' }}></input>
                                    <button onClick={() => { this.num(item, 1) }} style={{ width: '20px' }}>+</button>
                                </td>
                                <td onClick={() => this.detele(item.id)}>删除</td>
                            </tr>
                        )}
                        <tr>
                            <td colSpan={'3'}>汇总：{num}</td>
                            <td colSpan={'4'}>合计：￥{price}</td>
                        </tr>

                    </tbody>
                </table>
                <div></div>
            </div >
        )
    }
}
